<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>支付后抽奖</title>
    <link href="__STATIC_URL__/static/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/index.css"/>
    <link rel="stylesheet" type="text/css" href="__STATIC_URL__/static/css/list.css"/>
    <script src="__STATIC_URL__/static/js/jquery-1.10.2.min.js"></script>
    <script src="__STATIC_URL__/static/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="__STATIC_URL__/static/js/qrcode/qrcode.js"></script>
</head>

<body id="body">
{include file='public/header'/}
<section id="content">
    {include file='public/left'/}
    <div class="content">
        <!--路径导航-->
        <div class="page-heading mgl15 mgr15">
            <ul class="breadcrumb">
                <li>
                    <a href="javascript:void(0);">营销工具</a>
                </li>
                <li>
                    <a href="{:url('marke/tools')}">活动营销</a>
                </li>
                <li class="active" style="color: #02b87f;">支付后抽奖</li>
            </ul>
        </div>
        <!--创建会员卡主要内容-->
        <div class="panel panel-default mgl15 mgr15">
            <div class="panel-body">
                <ul class="singleList clearfix" style="padding: 15px;">
                    <li class="pull-left express" data-id="23" style="">
                        <div class="list-tit">
                            <i class="glyphicon glyphicon-book"></i>幸运大转盘
                        </div>
                        <div class="list-con mgt10 clearfix">
                            <div class="list-img pull-left">
                                <img src="__STATIC_URL__/static/images/new_temp.png" alt="" class="new_template">
                                <img src="__STATIC_URL__/static/images/38.jpg" alt="">
                                <div class="list-con-shadow" style="display: none;">
                                    <div class="qrimg"
                                         data-qr="http://mp.91keman.cn/PagePreview/render/mode/express.html?tpl_id=22">
                                        <div class="qr-wrapper"></div>
                                    </div>
                                    <a href="/PageDesign/add/mode/express.html?tpl_id=22&amp;ids=" target="_blank">
                                        <span class="span1">扫描预览</span>
                                    </a>
                                    <a href="" target="_blank">
                                        <span class="span2">去设置</span>
                                    </a>
                                </div>
                                <div class="list-con-text">
                                    <span>行业：全行业</span>
                                    <span>风格：支付狂欢节</span>
                                    <span>转化率：★★★★★</span>
                                    <em class="click_time">452</em>
                                </div>
                            </div>
                            <div class="icon-con pull-left">
                                <p class="icon-msg">
                                    <img src="__STATIC_URL__/static/images/icon-msg_12.png" alt=""> 支付周年狂欢主题
                                </p>
                                <p class="icon-msg">
                                    <img src="__STATIC_URL__/static/images/icon-msg.png" alt=""> 支付全网指定用品
                                </p>
                                <p class="icon-msg">
                                    <img src="__STATIC_URL__/static/images/icon-msg_2.png" alt=""> 快速上手，一键制作
                                </p>
                                <p class="icon-msg">
                                    <img src="__STATIC_URL__/static/images/icon-msg_19.png" alt=""> 修改券规则，添加优惠券
                                </p>
                                <p class="icon-msg">
                                    <img src="__STATIC_URL__/static/images/icon-msg_20.png" alt=""> 支持微信分享，快速传播
                                </p>
                            </div>
                        </div>
                    </li>

                    <li class="pull-left express" data-id="23" style="">
                        <div class="list-tit">
                            <i class="glyphicon glyphicon-book"></i>幸运九宫格
                        </div>
                        <div class="list-con mgt10 clearfix">
                            <div class="list-img pull-left">
                                <img src="__STATIC_URL__/static/images/new_temp.png" alt="" class="new_template">
                                <img src="__STATIC_URL__/static/images/grid.png" alt="">
                                <div class="list-con-shadow" style="display: none;">
                                    <div class="qrimg"
                                         data-qr="http://mp.91keman.cn/PagePreview/render/mode/express.html?tpl_id=22">
                                        <div class="qr-wrapper"></div>
                                    </div>
                                    <a href="/PageDesign/add/mode/express.html?tpl_id=22&amp;ids=" target="_blank">
                                        <span class="span1">扫描预览</span>
                                    </a>
                                    <a href="{:url('marke/payGrid')}" target="_blank">
                                        <span class="span2">去设置</span>
                                    </a>
                                </div>
                                <div class="list-con-text">
                                    <span>行业：全行业</span>
                                    <span>风格：支付狂欢节</span>
                                    <span>转化率：★★★★★</span>
                                    <em class="click_time">452</em>
                                </div>
                            </div>
                            <div class="icon-con pull-left">
                                <p class="icon-msg">
                                    <img src="__STATIC_URL__/static/images/icon-msg_12.png" alt=""> 支付周年狂欢主题
                                </p>
                                <p class="icon-msg">
                                    <img src="__STATIC_URL__/static/images/icon-msg.png" alt=""> 支付全网指定用品
                                </p>
                                <p class="icon-msg">
                                    <img src="__STATIC_URL__/static/images/icon-msg_2.png" alt=""> 快速上手，一键制作
                                </p>
                                <p class="icon-msg">
                                    <img src="__STATIC_URL__/static/images/icon-msg_19.png" alt=""> 修改券规则，添加优惠券
                                </p>
                                <p class="icon-msg">
                                    <img src="__STATIC_URL__/static/images/icon-msg_20.png" alt=""> 支持微信分享，快速传播
                                </p>
                            </div>
                        </div>
                    </li>
                    <li class="pull-left express" data-id="23" style="">
                        <div class="list-tit">
                            <i class="glyphicon glyphicon-book"></i>刮刮卡活动
                        </div>
                        <div class="list-con mgt10 clearfix">
                            <div class="list-img pull-left">
                                <img src="__STATIC_URL__/static/images/new_temp.png" alt="" class="new_template">
                                <img src="__STATIC_URL__/static/images/ggk.jpg" alt="">
                                <div class="list-con-shadow" style="display: none;">
                                    <div class="qrimg"
                                         data-qr="http://mp.91keman.cn/PagePreview/render/mode/express.html?tpl_id=22">
                                        <div class="qr-wrapper"></div>
                                    </div>
                                    <a href="/PageDesign/add/mode/express.html?tpl_id=22&amp;ids=" target="_blank">
                                        <span class="span1">扫描预览</span>
                                    </a>
                                    <a href="{:url('marke/payScratch')}" target="_blank">
                                        <span class="span2">去设置</span>
                                    </a>
                                </div>
                                <div class="list-con-text">
                                    <span>行业：全行业</span>
                                    <span>风格：支付狂欢节</span>
                                    <span>转化率：★★★★★</span>
                                    <em class="click_time">452</em>
                                </div>
                            </div>
                            <div class="icon-con pull-left">
                                <p class="icon-msg">
                                    <img src="__STATIC_URL__/static/images/icon-msg_12.png" alt=""> 支付周年狂欢主题
                                </p>
                                <p class="icon-msg">
                                    <img src="__STATIC_URL__/static/images/icon-msg.png" alt=""> 支付全网指定用品
                                </p>
                                <p class="icon-msg">
                                    <img src="__STATIC_URL__/static/images/icon-msg_2.png" alt=""> 快速上手，一键制作
                                </p>
                                <p class="icon-msg">
                                    <img src="__STATIC_URL__/static/images/icon-msg_19.png" alt=""> 修改券规则，添加优惠券
                                </p>
                                <p class="icon-msg">
                                    <img src="__STATIC_URL__/static/images/icon-msg_20.png" alt=""> 支持微信分享，快速传播
                                </p>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            {include file='public/footer'/}
        </div>
    </div>
</section>
</body>
<script type="text/javascript">
    $(function () {
        $(".list-img").each(function () {
            var _self = $(this),
                content = _self.find('.qrimg').data('qr'),
                _show = _self.find('.list-con-shadow'),
                _canvas = _self.find('.qr-wrapper');

            new QRCode(_canvas[0], {
                text: content,
                width: 200,
                height: 200,
                colorDark: '#000000',
                colorLight: '#ffffff',
                correctLevel: QRCode.CorrectLevel.L
            });
        });
        $(".list-img").mouseenter(function () {
//            $(this).find(".list-con-text").addClass("nobg");
            $(this).find(".list-con-shadow").fadeIn();
        }).mouseleave(function () {
//            $(this).find(".list-con-text").removeClass("nobg");
            $(this).find(".list-con-shadow").stop(true).fadeOut();
        })
    })
</script>
</html>